<script setup>
import { ref, reactive, onMounted } from "vue";
import { getUserData,delorder,delAct } from '../../api/user'
const userData = ref({})
const orderColor =[" rgba(111, 39, 92, 0.5)", "rgba(36, 121, 98, 0.5)", " rgba(95, 172, 18, 0.5)", "rgba(37, 10, 85, 0.5)"]
function delOrderData(index){
    delorder({
        index:index
    })
    getUserData()
        .then((res) => {
            userData.value = res.data.data
            console.log(res);
        }
        )
}
function delActData(index){
    delAct({
        index:index
    })
    getUserData()
        .then((res) => {
            userData.value = res.data.data
            console.log(res);
        }
        )
}
onMounted(() => {
    getUserData()
        .then((res) => {
            userData.value = res.data.data
            console.log(res);
        }
        )
})
</script>
<template>
    <div class="userbox">
        <div class="userbody">
            <img class="userimg" :src="userData.faceurl" alt="">
        <h1 style="color: yellow;">{{ userData.name }}</h1>
        <div class="happy">
            爱好：<span style="color: chartreuse;">{{ userData.happy }}</span><br>
            年龄:<span style="color: palevioletred;">{{ userData.age }}</span>
        </div>
        <div style="color: salmon;text-align: left; font-size: 20px;">你的订单:</div>
        <div class="order">
            <div v-for="(item, index) in userData.order" :key="index" class="orderbox"
                :style='{ backgroundColor:orderColor[index] }'>
                <h4>{{ item.name }}</h4>
                <img class="orderimg" :src="item.url" alt="">
                <el-button v-if="item.buy == 0" type="danger" @click="delOrderData(index)">取消订单</el-button>
                <el-button v-if="item.buy == 1" type="danger" @click="delOrderData(index)">取消购买</el-button>
                <el-button v-if="item.buy == 2" type="danger" @click="delOrderData(index)">取消预约</el-button>
            </div>

        </div>
        <div style="color: greenyellow;text-align: left; font-size: 20px; margin-top: 10px;">报名活动:</div>
        <div class="order">
        <div v-for="(item, index) in userData.act" :key="index" class="orderbox"
                :style='{ backgroundColor:orderColor[index] }'>
                <h4>{{ item.name }}</h4>
                <img class="orderimg" :src="item.url" alt="">
                <el-button  type="danger" @click="delActData(index)">取消报名</el-button>

        </div>
    </div>
        </div>
    </div>
</template>
<style scoped>
.userbox {
    width: 100%;
    margin: 20px auto;
    text-align: center;
    background:fixed url('https://www.toopic.cn/public/uploads/small/1642748787145164274878718.png') no-repeat;
    background-size:cover
}
.userbody{
    width: 700px;
    text-align: center;
    background-color: rgba(23, 75, 118,.7);
    margin: auto;
}

.userimg {
    width: 200px;
    height: 200px;
    border-radius: 200px;
}

.happy {
    font-size: 20px;
}

.order {
    margin-top: 10px;
    text-align: left;
    font-size: 20px;
    width: 100%;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.orderimg {
    width: 100%;
    height: 220px;
}

.orderbox {
    margin-left: 35px;
    padding: 10px;
    border: 1px solid brown;
    margin-top: 10px;
    width: 23%;
    font-size: 12px;
}
</style>